<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>用户管理</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!-- <script
	src="http://cdn.static.runoob.com/libs/jquery/2.2.1/jquery.min.js">  </script> -->
<script src="static/js/jquery-2.1.1.min.js"></script>

<style>
* {
	margin: 0;
	padding: 0;
}

#divBody {
	width: 100%;
	height: 1000px;
	background: #ededed;
}

#tableBookList {
	width: 100%;
}

#tableBookList td {
	width: 14%;
	background: #ccc5c5;
	text-align: center;
}

.search-box {
	width: 100px;
}
/* #divButton span{
    display:block;
	float:right;
} */
#divButton button {
	float: right;
}

.borrowId {
	display: none;
}

#form {
	display: none;
}
</style>

<!-- 弹出层样式 -->
<style type="text/css">
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	background-color: #ccc5c5;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}

.white_content {
	display: none;
	position: absolute;
	width: 50%;
	height: 40%;
	margin: 0px auto;
	border: 16px solid #717f84;
	border-radius: 15px;
	background-color: rgba(66, 133, 244, 0.3);
	z-index: 1002;
	overflow: auto;
}

.white_content_small {
	display: none;
	position: absolute;
	top: 2%;
	left: 1%;
	width: 100%;
	height: 80%;
	border: 1px solid lightblue;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

.wrapper {
	background: #50a3a2;
	background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
	opacity: 0.8;
	position: absolute;
	/*   top: 50%;
  left: 0;
  width: 100%;
  height: 400px;
  margin-top: -200px;
  overflow: hidden; */
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.wrapper.form-success .container h1 {
	-webkit-transform: translateY(85px);
	-ms-transform: translateY(85px);
	transform: translateY(85px);
}

.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 200px 0;
	height: 500px;
	text-align: center;
}

.container h1 {
	font-size: 40px;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-timing-function: ease-in-put;
	transition-timing-function: ease-in-put;
	font-weight: 200;
}

form {
	padding: 20px 0;
	position: relative;
	z-index: 2;
	background-color: rgba(167, 168, 170, 0.6);
	border-radius: 5px;
}

form input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.2);
	width: 250px;
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	display: block;
	text-align: center;
	font-size: 18px;
	color: white;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	font-weight: 300;
}

form input:hover {
	background-color: rgba(255, 255, 255, 0.4);
}

form input:focus {
	background-color: white;
	width: 300px;
	color: #53e3a6;
}

#domainId {
	display: none;
}

#delId {
	display: none;
}

form h3 {
	color: #53e3a6;
}

form button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	background-color: white;
	border: 0;
	padding: 10px 15px;
	color: #53e3a6;
	border-radius: 3px;
	width: 122px;
	cursor: pointer;
	font-size: 18px;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
}

form button:hover {
	background-color: #f5f7f9;
}

.bg-bubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bg-bubbles li {
	position: absolute;
	list-style: none;
	display: block;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.15);
	bottom: -160px;
	-webkit-animation: square 25s infinite;
	animation: square 25s infinite;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.bg-bubbles li:nth-child(1) {
	left: 10%;
}

.bg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 17s;
	animation-duration: 17s;
}

.bg-bubbles li:nth-child(3) {
	left: 25%;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	-webkit-animation-duration: 22s;
	animation-duration: 22s;
	background-color: rgba(255, 255, 255, 0.25);
}

.bg-bubbles li:nth-child(5) {
	left: 70%;
}

.bg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}

.bg-bubbles li:nth-child(7) {
	left: 32%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 7s;
	animation-delay: 7s;
}

.bg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	-webkit-animation-delay: 15s;
	animation-delay: 15s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
}

.bg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-duration: 40s;
	animation-duration: 40s;
	background-color: rgba(255, 255, 255, 0.3);
}

.bg-bubbles li:nth-child(10) {
	left: 90%;
	width: 160px;
	height: 160px;
	-webkit-animation-delay: 11s;
	animation-delay: 11s;
}

@
-webkit-keyframes square { 0% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

100%
{
-webkit-transform




:


 


translateY




(-700
px


)
rotate




(600
deg


);
transform




:


 


translateY




(-700
px


)
rotate




(600
deg


);
}
}
@
keyframes square { 0% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
100%
{
-webkit-transform




:


 


translateY




(-700
px


)
rotate




(600
deg


);
transform




:


 


translateY




(-700
px


)
rotate




(600
deg


);
}
}
</style>

<!-- 按钮样式 -->
<style type="text/css">
/* body { 
background: #ededed; 
width: 900px; 
margin: 30px auto; 
color: #999; 
} */
p {
	margin: 0 0 2em;
}

h1 {
	margin: 0;
}

a {
	color: #339;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

div {
	padding: 20px 0;
	border-bottom: solid 1px #ccc;
}
/* button 
---------------------------------------------- */
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button:hover {
	text-decoration: none;
}

.button:active {
	position: relative;
	top: 1px;
}

.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}

.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}
/* color styles 
---------------------------------------------- */
/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666),
		to(#000));
	background: -moz-linear-gradient(top, #666, #000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',
		endColorstr='#000000');
}

.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444),
		to(#000));
	background: -moz-linear-gradient(top, #444, #000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
		endColorstr='#000000');
}

.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000),
		to(#444));
	background: -moz-linear-gradient(top, #000, #444);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
		endColorstr='#666666');
}
/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888),
		to(#575757));
	background: -moz-linear-gradient(top, #888, #575757);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
		endColorstr='#575757');
}

.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575),
		to(#4b4b4b));
	background: -moz-linear-gradient(top, #757575, #4b4b4b);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
		endColorstr='#4b4b4b');
}

.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757),
		to(#888));
	background: -moz-linear-gradient(top, #575757, #888);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
		endColorstr='#888888');
}
/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff),
		to(#ededed));
	background: -moz-linear-gradient(top, #fff, #ededed);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
		endColorstr='#ededed');
}

.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff),
		to(#dcdcdc));
	background: -moz-linear-gradient(top, #fff, #dcdcdc);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
		endColorstr='#dcdcdc');
}

.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed),
		to(#fff));
	background: -moz-linear-gradient(top, #ededed, #fff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
		endColorstr='#ffffff');
}
/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a),
		to(#f47a20));
	background: -moz-linear-gradient(top, #faa51a, #f47a20);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
		endColorstr='#f47a20');
}

.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11),
		to(#f06015));
	background: -moz-linear-gradient(top, #f88e11, #f06015);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
		endColorstr='#f06015');
}

.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),
		to(#faa51a));
	background: -moz-linear-gradient(top, #f47a20, #faa51a);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
		endColorstr='#faa51a');
}
/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),
		to(#aa1317));
	background: -moz-linear-gradient(top, #ed1c24, #aa1317);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
		endColorstr='#aa1317');
}

.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),
		to(#a11115));
	background: -moz-linear-gradient(top, #c9151b, #a11115);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
		endColorstr='#a11115');
}

.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),
		to(#ed1c24));
	background: -moz-linear-gradient(top, #aa1317, #ed1c24);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
		endColorstr='#ed1c24');
}
/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee),
		to(#0078a5));
	background: -moz-linear-gradient(top, #00adee, #0078a5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
		endColorstr='#0078a5');
}

.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc),
		to(#00678e));
	background: -moz-linear-gradient(top, #0095cc, #00678e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',
		endColorstr='#00678e');
}

.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),
		to(#00adee));
	background: -moz-linear-gradient(top, #0078a5, #00adee);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
		endColorstr='#00adee');
}
/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c),
		to(#bf404f));
	background: -moz-linear-gradient(top, #f16c7c, #bf404f);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',
		endColorstr='#bf404f');
}

.rosy:hover {
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a),
		to(#a53845));
	background: -moz-linear-gradient(top, #cf5d6a, #a53845);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',
		endColorstr='#a53845');
}

.rosy:active {
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f),
		to(#f16c7c));
	background: -moz-linear-gradient(top, #bf404f, #f16c7c);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',
		endColorstr='#f16c7c');
}
/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f),
		to(#4e7d0e));
	background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',
		endColorstr='#4e7d0e');
}

.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28),
		to(#436b0c));
	background: -moz-linear-gradient(top, #6b9d28, #436b0c);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',
		endColorstr='#436b0c');
}

.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),
		to(#7db72f));
	background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',
		endColorstr='#7db72f');
}
/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3),
		to(#f171ab));
	background: -moz-linear-gradient(top, #feb1d3, #f171ab);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',
		endColorstr='#f171ab');
}

.pink:hover {
	background: #d57ea5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb),
		to(#e86ca4));
	background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',
		endColorstr='#e86ca4');
}

.pink:active {
	color: #f3c3d9;
	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab),
		to(#feb1d3));
	background: -moz-linear-gradient(top, #f171ab, #feb1d3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',
		endColorstr='#feb1d3');
}
</style>


</head>
<script type="text/javascript">
	//加载 班级学生
	function LoadData() {
		//清空表
		$("#tableBookList").html("");
		//请求数据
		$
				.ajax({
					type : 'POST',
					url : '/network_monitoring_system/net/user/listall',
					/* data :JSON.stringify(pageParam), */
					success : function(data) {
						var userList = data.data.userList;
						/* alert(JSON.stringify(userList)); */
						var tableData = "";
						//表头
						tableData += "<tr>" + "<td >" + "编号" + "</td>" + "<td>"
								+ "用户名" + "</td>" + "<td>" + "用户类型" + "</td>"
								+ "<td>" + "用户状态" + "</td>" + "<td>" + "操作"
								+ "</td>" + "</tr>";
						$("#tableBookList").append(tableData);
						var user;
						for (var i = 0; i < userList.length; i++) {
							user = userList[i];
							var type = '';
							var status = '';

							if (user.type == 0) {
								type = "系统管理员"
							} else {
								type = "普通管理员"
							}

							if (user.status == 0) {
								status = "正常"
							} else if(user.status == 1){
								status = "禁用"
							}
							tableData = "<tr>"
									+ "<td class='websiteId'>"
									+ user.id
									+ "</td>"
									+ "<td >"
									+ user.user_name
									+ "</td>"
									+ "<td>"
									+ type
									+ "</td>"
									+ "<td>"
									+ status
									+ "</td>"

									+ "<td>"
									+ "<button id='" + user.id + "' class='button white small' >编辑</button>"
									+ "<button class='button white small' onclick='openConfirmDelWindow("
									+ user.id + ")'>删除</button>" + "</td>"
									+ "</tr>";
							$("#tableBookList").append(tableData);
							$("#" + user.id).click(
									function() {
										edit(user.id, user.user_name,
												user.user_pass, user.type, user.status);
									});
						}
					},
					contentType : "application/json",
					dataType : "json"
				});

	};

	function del(id) {
		var domain = "0";
		var type = "0";
		var param = new Object();
		param.id = id;
		param.user_name = "1";
		param.user_pass = "1";
		param.type = 1;
		param.status = 1;
		$.ajax({
			type : 'POST',
			url : '/network_monitoring_system/net/user/del',
			data : JSON.stringify(param),
			success : function(data) {
				LoadData();
				alert(JSON.stringify(data.message));
			},
			contentType : "application/json",
			dataType : "json"
		});
	};

	function dateFormat(date, fmt) {
		var o = {
			"M+" : date.getMonth() + 1,
			"d+" : date.getDate(),
			"h+" : date.getHours(),
			"m+" : date.getMinutes(),
			"s+" : date.getSeconds(),
			"q+" : Math.floor((date.getMonth() + 3) / 3),
			"S" : date.getMilliseconds()
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "")
					.substr(4 - RegExp.$1.length));
		for ( var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
						: (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	};

	//修改
	function edit(id, userName, userPass, userType, userStatus) {
		$("#domainId").val(id);
		$("#userName").val(userName);
		$("#userType").val(userType);
		$("#userStatus").val(userStatus);
		showWindow('MyDiv', 'fade');
	};

	/* 弹出层 */
	/* 初始化参数修改窗口 */
	function showWindow(show_div, bg_div) {
		document.getElementById(show_div).style.display = 'block';

		document.getElementById(bg_div).style.display = 'block';

		var bgdiv = document.getElementById(bg_div);
		bgdiv.style.width = document.body.scrollWidth;
		/* bgdiv.style.height = $(document).height(); */
		bgdiv.style.height = document.body.scrollHeight;
		$("#" + bg_div).height($(document).height());
	};

	/* 关闭编辑窗口 */
	function closeWindow() {
		document.getElementById("MyDiv").style.display = 'none';
		document.getElementById("fade").style.display = 'none';
	};
	function openConfirmDelWindow(id) {
		$("#delId").val(id);
		/* showWindow(confirmDelWin, confirmDelDiv); */
		document.getElementById("confirmDelWin").style.display = 'block';

		document.getElementById("confirmDelDiv").style.display = 'block';
	};
	/* 关闭确认删除窗口 */
	function closeConfirmDelWindow() {
		document.getElementById("confirmDelWin").style.display = 'none';
		document.getElementById("confirmDelDiv").style.display = 'none';
	};
	function confirmEdit() {

		document.getElementById("MyDiv").style.display = 'none';
		document.getElementById("fade").style.display = 'none';
		var id = $("#domainId").val();
		alert(id);
		var user_name = $("#userName").val();
		var user_pass = $("#userPass").val();
		var type = $("#userType").val();
		var status = $("#userStatus").val();
		var param = new Object();
		param.id = id;
		param.user_name = user_name;
		param.user_pass = user_pass;
		param.type = type;
		param.status = status;
		$.ajax({
			type : 'POST',
			url : '/network_monitoring_system/net/user/edit',
			data : JSON.stringify(param),
			success : function(data) {
				LoadData();
				alert(JSON.stringify(data.message));
			},
			contentType : "application/json",
			dataType : "json"
		});
	};

	function confirmDel() {
		var param = new Object();
		param.id = $("#delId").val();
		param.user_name = "1";
		param.user_pass = "1";
		param.type = 1;
		param.status = 1;
		$.ajax({
			type : 'POST',
			url : '/network_monitoring_system/net/user/del',
			data : JSON.stringify(param),
			success : function(data) {
				LoadData();
				closeConfirmDelWindow();
				alert(JSON.stringify(data.message));
			},
			contentType : "application/json",
			dataType : "json"
		});
	};

	function confirmAdd() {
		var param = new Object();
		param.id = "0";
		param.user_name = $("#addName").val();
		param.user_pass = $("#addPass").val();
		param.type = $("#addType").val();
		param.status = $("#addStatus").val();
		alert(JSON.stringify(param)); 
		$.ajax({
			type : 'POST',
			url : '/network_monitoring_system/net/user/add',
			data : JSON.stringify(param),
			success : function(data) {
				LoadData();
				closeAddWindow();
				/* alert(JSON.stringify(data.message)); */
			},
			contentType : "application/json",
			dataType : "json"
		});
	};

	function closeAddWindow() {
		document.getElementById("addWin").style.display = 'none';
		document.getElementById("addDiv").style.display = 'none';
	};

	window.onload = function() {
		LoadData();
	};
</script>
<body>
	<div id="divBody">
		<div id="divBookList">
			<table id="tableBookList">
				<!-- 加载数据后自动填充 -->
			</table>
		</div>

		<div id="divButton">

			<!-- <button type="button" onclick="jumpPage(2,27)" class="button white bigrounded">下一页</button>
			<button type="button" onclick="jumpPage(1,27)" class="button white bigrounded">上一页</button>
			<button type="button" onclick="LoadData(1,27)" class="button white bigrounded">第一页</button>
			<span>第<span id="currentPage"></span>页</span>
			<span>每页<span id="showCount"></span>条</span> 
			<span>共<span id="totalPage"></span>页</span>
			<span>共<span id="totalResult"></span>条</span> -->

			<button type="button" class="button white bigrounded"
				onclick="showWindow('addWin', 'addDiv')">新增</button>



		</div>
		<div id="fade" class="black_overlay">
			<div id="MyDiv" class="container">
				<h1>Welcome</h1>
				<form class="form" name="form">
					<h3>用户名</h3>
					<input id="userName" type="text" placeholder="用户名" maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<h3>密码</h3>
					<input id="userPass" type="text" placeholder="密码" maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

					<h3>类型</h3>
					<input id="userType" type="text" placeholder="0:系统  1:普通"
						maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<h3>状态</h3>
					<input id="userStatus" type="text" placeholder="0:禁用  1:启用"
						maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<input id="domainId" type="text" value="" maxlength='32'
						onkeyup="value=value.replace(/[^\d]/g,'') "
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<button class="windowButton" type="button" onclick="confirmEdit()">确定</button>
					<button class="windowButton" type="button" onclick="closeWindow()">返回</button>
				</form>
			</div>
		</div>

		<div id="confirmDelWin" class="black_overlay">
			<div id="confirmDelDiv" class="container">
				<form class="form" name="form">
					<h3>确认删除？</h3>
					<input id="delId" type="text" value="" maxlength='32'
						onkeyup="value=value.replace(/[^\d]/g,'') "
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<button class="windowButton" type="button" onclick="confirmDel()">确定</button>
					<button class="windowButton" type="button"
						onclick="closeConfirmDelWindow()">返回</button>
				</form>
			</div>
		</div>


		<div id="addWin" class="black_overlay">
			<div id="addDiv" class="container">
				<h3>新增</h3>
				<form class="form" name="form">
					<h3>用户名</h3>
					<input id="addName" type="text" placeholder="用户名" maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<h3>密码</h3>
					<input id="addPass" type="text" placeholder="密码" maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

					<h3>类型</h3>
					<input id="addType" type="text" placeholder="0:系统  1:普通"
						maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<h3>状态</h3>
					<input id="addStatus" type="text" placeholder="0:禁用  1:启用"
						maxlength='32'
						onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
					<button class="windowButton" type="button" onclick="confirmAdd()">确定</button>
					<button class="windowButton" type="button"
						onclick="closeAddWindow()">返回</button>
				</form>
			</div>
		</div>

		<form name="form" id="form" method="post">
			<input id="detail-param-id" type="text" value="" name="borrowId" />
		</form>
	</div>



</body>
</html>